<template>
  <div v-loading="loading" :element-loading-text="loadingText" class="config-edit">
    <div v-show="!showPicDetail">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">定制类配置</el-breadcrumb-item>
          <el-breadcrumb-item>产品配置</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click="handleBack">取消</el-button>
          <el-button type="primary" size="mini" @click="clickNextStep">确认</el-button>
        </div>
      </div>
      <c-list :column="3">
        <c-list-item label="产品配置单" :value="formData.configCode" />
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
        <c-list-item label="采购订单号" :value="formData.poCode" />
        <c-list-item label="采购订单状态" dict-type-code="PO_STATE" :value="formData.poState" />
        <c-list-item label="采购订单提报时间" :value="formData.poReportTime" />
        <c-list-item label="创建人" :value="formData.createBy" />
        <c-list-item label="创建时间" :value="formData.createTime" />
        <c-list-item label="修改人" :value="formData.lastUpdateBy" />
        <c-list-item label="修改时间" :value="formData.lastUpdateTime" />
      </c-list>
      <c-section title="关联图纸信息">
        <c-table-box hide-func :data="formData.designPictureDtos" :table-config="tableConfig" />
      </c-section>
      <c-section title="产品配置图纸上传">
        <div v-for="item in fileTypeList" :key="item.id">
          <div class="qup-title-box">
            <span class="border" /><span>附件上传-{{ item.attachmentType }}</span>
          </div>
          <file-uploader
            :data="item.fileList"
            :file-type="item.fileTypeName"
            :config-attachment-id="item.id"
            :limit="20"
            @remove="removeFile"
            @upload-success="uploadSuccessFile"
          />
        </div>
      </c-section>
    </div>
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
  </div>
</template>
<script>
// import RelevanceDrawing from '../../components/relevanceDrawing'
import fileUploader from '@/components/importFile'
import detail from '../../../shopDrawing/management/detail.vue'
import { getShopAttachment } from '@/api/decorate'
import { getDictByPatchType } from '@/api/dataDict'
import { getAreaData } from '../../task/components/index'
import { postConfigAttachmentTemplate, getProConfigEditData, changeFileList, changeConfigState } from '@/api/proConfig'
export default {
  name: 'PCCustomizationConfigEdit',
  components: {
    // RelevanceDrawing
    fileUploader, detail
  },
  data() {
    return {
      rowId: '',
      showPicDetail: false,
      loading: false,
      loadingText: '',
      areaList: [],
      otherFilters: [],
      designRangeList: [],
      decorationTypeList: [],
      designSpaceList: [],
      designBizTypeList: [],
      formData: {
        configCode: ''
      },
      tableConfig: {
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toPicDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.designRangeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationType) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 140,
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 120
          },
          // {
          //   prop: 'finishedProductAreaSummary',
          //   label: '成品业务面积汇总',
          //   minWidth: 100
          // },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            minWidth: 140
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 120
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总',
            minWidth: 100
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 140
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            },
            minWidth: 100
          },
          {
            prop: 'state',
            label: '图纸状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            },
            minWidth: 100
          }
        ]
      }
      // 导入
      // visible: false,
      // fileConfig: [],
      // taskConfig: {}
    }
  },
  async created() {
    this.loading = true
    this.loadingText = '加载中'
    this.id = this.$route.params.id
    this.type = this.$route.params.type
    await this.getDictByTypeCode(['DECORATION_RANGE', 'DECORATION_FORM', 'BELONG_REGION', 'BIZ_TYPE']).then(res => {
      this.designRangeList = res.DECORATION_RANGE // 设计范围
      this.decorationTypeList = res.DECORATION_FORM // 装修形式
      this.designSpaceList = res.BELONG_REGION // 设计专区
      this.designBizTypeList = res.BIZ_TYPE // 设计业务类型
    })
    await postConfigAttachmentTemplate('PRODUCT_CONFIG').then(res => {
      if (res.success === 1) {
        // 根据modelId获取每个配置id
        this.fileTypeList = res.data.records.filter(item => item.attachmentType === '定制产品配置图')
        this.fileTypeList.forEach(row => {
          this.$set(row, 'fileList', [])
        })
      }
    }).catch(() => {
      this.loading = false
    })
    // return
    this.areaList = await getAreaData()
    await this.getFiles()
    await getProConfigEditData(this.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
      }
      this.loading = false
    }).catch(() => {
      this.loading = false
    })
  },
  methods: {
    // 获取数据字典
    async getDictByTypeCode(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 获取附件
    async getFiles() {
      await getShopAttachment(this.id).then(res => {
        this.fileTypeList.forEach(row => {
          row.fileList = res.data.filter(i => i.configAttachmentId === row.id)
        })
      }).catch(() => {
        this.loading = false
      })
    },
    removeFile() {},
    uploadSuccessFile() {},
    // 查看图纸详情
    toPicDetail(row) {
      this.rowId = row
      this.showPicDetail = true
    },
    // 返回配置详情
    backDetail() {
      this.showPicDetail = false
    },
    // 取消
    handleBack() {
      this.dialogShow = false
      this.clearForm()
      this.$store.dispatch('views/goBack')
    },
    clearForm(done) {
      this.formData = {}
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    // 确认
    clickNextStep() {
      // const obj = {}
      const len = this.fileTypeList.map(item => item.fileList.length)
      if (!len[0]) {
        this.$message.warning('请至少上传一个附件')
        return
      }
      const dtos = this.fileTypeList.map(item => item.fileList)
      dtos[0].forEach(file => {
        file.modelId = this.id
      })
      this.loading = true
      this.loadingText = '系统处理中'
      changeFileList(dtos[0], this.id).then(res => {
        if (res.success) {
          // this.$message.success('附件上传成功')
          // this.formData.schedule = 'A'
          changeConfigState(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.clearForm()
              this.$store.dispatch('views/goFirst')
            }
          }).catch(() => {
            this.loading = false
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
